import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';

console.log(BrowserRouter)

function A() {
    return <h1>组件A</h1>
}

function B() {
    return <h1>组件B</h1>
}

function C() {
    return <h1>
        找不到页面
        <Route path="/abc" exact component={D}/>
    </h1>
}

function D() {
    return <span>D组件</span>
}

function Index(props) {
    return (
        <BrowserRouter>
            <Route path="/a" component={A} exact={true}/>
            <Route path="/a/b" component={B} exact={true} sensitive={true}/>
            <Route path="/a/c" component={C}>
                <div>取代组件c作为路由展示</div>
            </Route>
            <Route component={C}/>
        </BrowserRouter>
    );
}

function SwitchIndex(props) {
    // 当匹配到一个结果后，后面的组件将会跳过忽略
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/a" component={A} exact={true}/>
                <Route path="/a/b" component={B} sensitive={true}/>
                <Route component={C}/>
            </Switch>
        </BrowserRouter>

    )
}

export default Index;